<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <base target='_blank'>
        <title>CSS 图片画廊</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            .container {
                position: absolute;
                margin:0 auto;
            }
            .gallery{
                width:auto;
                height:auto;
                margin:2px;
                border:1px solid #0000FF;
                text-align:center;
                float:left;
            }
            .gallery img{
                width: 90px;
                height: 90px;
                margin:5px;
                border:1px solid #FFFFFF;
            }
            a:hover img{
                border:1px solid #4169E1;
            }
            .desc{
                width:120px;
                margin:2px;
            }
        </style>
    </head>
    <body>
    <div class="container">
        <div class="gallery">
            <a href="#" target="_blank"><img src="images/1.jpg" alt="anime"></a>
            <div class="desc">图片画廊也可以叫图片库，非常适合作为图片展示、个人作品展示和相册使用，可以在页面上显示系列图片，因此图片画廊也是网站重要的组成部分，实现图片画廊有很多种方法，这里就简单的用 CSS 创建一个图片画廊，如果使用 CSS3 可以让图片画廊拥有更加炫酷的效果。</div>
        </div>
        <div class="gallery">
            <a href="#" target="_blank"><img src="images/2.jpg" alt="anime"></a>
            <div class="desc">在这里可以为图片添加相关描述。</div>
        </div>
        <div class="gallery">
            <a href="#" target="_blank"><img src="images/3.jpg" alt="anime"></a>
            <div class="desc">在这里可以为图片添加相关描述。一个大西瓜，中间切两半，一半给左边，一半给右边。</div>
        </div>
        <div class="gallery">
            <a href="#" target="_blank"><img src="images/4.jpg" alt="anime"></a>
            <div class="desc">在这里可以为图片添加相关描述。</div>
        </div>
    </div>
    </body>
</html>